<!-- 企业认领 -->
<template>
  <view class="content screen-width">
    <navBar :title="`企业认领`" />
    <view class="main">
      <view class="main_title">
        <view class="main_text">认领企业</view>
        <view class="main_subText">{{ companyName }}</view>
      </view>
      <view class="main_content">
        <view class="main_content_item">
          <span>联系人</span>
          <input type="text" name v-model="contactPerson" id placeholder="请输入姓名" />
        </view>
        <view class="main_content_item">
          <span>联系方式</span>
          <input type="text" name v-model="contactNumber" id placeholder="请输入手机号" />
        </view>
        <view class="main_content_item">
          <span>营业执照</span>
          <view class="uption">
            <view class="uption_top">
              <view class="image_border" v-show="photoList">
                <image :src="$imgUrl + photoList" mode />
                <van-icon name="close" class="closeBtn" @tap="delPhotoList()" />
              </view>
              <view class="button" @tap="upload(1)" v-if="!photoList">上传</view>
            </view>

            <span>支持JPG/PNG,最大不可超过2M</span>
          </view>
        </view>
        <view class="main_content_item">
          <span>个人名片</span>
          <view class="uption">
            <view class="uption_top">
              <view class="image_border" v-show="cardList">
                <image :src="$imgUrl + cardList" mode />
                <van-icon name="close" class="closeBtn" @tap="delCard" />
              </view>
              <view class="button" @tap="upload(2)" v-if="!cardList">上传</view>
            </view>

            <span>支持JPG/PNG,最大不可超过2M</span>
          </view>
        </view>
        <view class="submit_btn" @tap="uploadSubBtn">提交</view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import navBar from "../../components/topBar.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    navBar
  },
  data() {
    //这里存放数据
    return {
      companyName: "", // 公司名称
      companyId: "", // 公司id
      contactPerson: "", // 联系人姓名
      contactNumber: "", // 联系人电话
      fileList: [], // 接受文件返回列表
      photoList: "", // 上传文件列表数据
      cardList: "" // 上传名片列表
    };
  },
  onLoad(options) {
    let { title, id } = options;
    this.companyName = title;
    this.companyId = id;

    let token = this.$getToken();
    if (!token) {
      uni.showToast({
        title: "您还没有登录，请登录后操作",
        duration: 2000,
        icon: "none"
      });
      setTimeout(() => {
        uni.setStorageSync("pageUrl", window.location.href);
        uni.navigateTo({
          url: "/pages/login/index"
        });
      }, 2000);
    }
  },
  //方法集合
  methods: {
    // 点击删除上传文件
    delPhotoList() {
      this.photoList = "";
    },
    // 点击删除名片
    delCard() {
      this.cardList = "";
    },
    // 点击上传名片
    upload(type) {
      let _this = this;
      let _type = type;
      uni.chooseImage({
        count: 1,
        success: chooseImageRes => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: "https://bootapi.51bmj.cn/bmj-api/api/home/upload", //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              user: "test"
            },
            success: res => {
              let { data } = res;
              data = JSON.parse(data);
              if (_type === 1) {
                _this.photoList = data.result;
              } else {
                _this.cardList = data.result;
              }
            }
          });
        }
      });
    },

    // 点击上传按钮
    uploadSubBtn() {
      if (!this.contactPerson.trim()) {
        uni.showToast({
          title: "请填写联系人",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (!this.contactNumber.trim()) {
        uni.showToast({
          title: "请填写联系方式",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (!this.photoList.length) {
        uni.showToast({
          title: "请上传营业执照",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (!this.cardList.length) {
        uni.showToast({
          title: "请上传个人名片",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      // 开始发送请求
      let data = {
        businessCard: this.cardList,
        businessLicense: this.photoList,
        companyId: this.companyId,
        companyName: this.companyName,
        contactNumber: this.contactNumber,
        contactPerson: this.contactPerson
      };
      this.$post("/bmj-api/api/cms/cmsCompanyClaim/add", data).then(res => {
        console.log(res);
        if (res.code === 200) {
          uni.showToast({
            title: "提交成功！",
            duration: 2000,
            icon: "none"
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else if (res.code === 500) {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: "none"
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.main {
  background-image: url(https://dm-bmj.oss-cn-guangzhou.aliyuncs.com/static/bg_image.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0 30rpx;
  .main_title {
    margin: 40rpx 0;
    .main_text {
      font-weight: 700;
      font-size: 36rpx;
      color: #333333;
    }
    .main_subText {
      font-size: 28rpx;
      color: #aaaaaa;
      margin-top: 20rpx;
    }
  }
  .main_content {
    margin-top: 40rpx;
    background-color: #fff;
    padding: 0 40px 124rpx;
    .main_content_item {
      min-height: 120rpx;
      display: flex;

      align-items: center;
      input {
        flex: 1;
        margin-left: 60rpx;
      }
      .uption {
        flex: 1;
        margin-left: 60rpx;
        padding: 20rpx 0;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-start;
        // align-items: flex-start;
        .uption_top {
          display: flex;
          align-items: flex-end;
          .image_border {
            position: relative;
            image {
              max-width: 100rpx;
              max-height: 100rpx;
              margin: 0 5rpx;
            }
            .closeBtn {
              position: absolute;
              right: 5rpx;
              top: 0rpx;
            }
          }
          .button {
            width: 120rpx;
            height: 40rpx;
            border: 1rpx solid #ccc;
            color: #1678ff;
            display: flex;
            font-size: 26rpx;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
          }
        }

        span {
          font-size: 20rpx;
          color: #333333;
          margin-top: 10rpx;
        }
      }
    }
  }
  .submit_btn {
    width: 100%;
    font-size: 32rpx;
    margin: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    height: 88rpx;
    background-color: #007aff;
  }
}
</style>
